<template>
  <h3>ref函数的演示</h3>
  <hr>
  <div>
    <span>计数器测试 - 当前计数: {{count}}</span>
    <button @click="count++">+</button>
    <button @click="count--">-</button>
  </div>

  <hr>
  <div>用户名:　{{name}}</div>
  <button @click="changeUserName">修改用户名</button>
  <input ref="userbox" value="new user name">
  <br><br>
  <div>薪水:　{{salary}}</div>
  <span>改薪水:</span>
  <input type="number" v-model="salary">
  <br><br>
  <label for="hiredstate">在职吗? {{hired}} </label>
  <input type="checkbox" v-model="hired" id="hiredstate">
  <br>
  <div>入职日期: {{fmtHireDate}}</div>
  <!-- 直接绑定,则初始化时无法在日期组件里显示正确的日期 <input class="date" type="date" v-model="hireDate"> -->
  <input class="date" type="date" 
    :value="hireDate.toJSON().substring(0,10)"
    @input="hireDate = new Date($event.target.value)"
    >
  <hr>

  <div>以下是使用ref包装对象数据的测试:</div>
  <div>*** Name is {{student.name}}</div>
  <div>*** Age is {{student.age}}</div>
  <div>*** Hobbies are {{student.hobby}}</div>
  <button @click="changeStudent">改变对象数据</button>
  <hr>

  <p>
    注意:<br>
    1. 在模板中可以直接使用ref函数定义的变量,实际上是封装好的对象;不过在js代码中必须用.value来访问或修改,否则对象就会被具体的值覆盖了,也就失去了响应式的功能.<br>
    2. ref函数一般用于基本类型数据,如果用于对象类型的数据,则实际上是调用reactive再包装一下,并且在js代码中也需要调用.value才能访问到具体的值.<br>
    3. 用v-model直接绑定日期值,则初始化时无法在日期组件里显示正确的日期. <br>
    　　错误的例子: &lt;input class=&quot;date&quot; type=&quot;date&quot; v-model=&quot;hireDate&quot;&gt;　<br>
  </p>
</template>

<script>
import {ref, isRef, isReactive, computed} from 'vue'
import {getObjClass} from 'common/utils/getObjClass'
import {formatDate} from 'common/utils/dateUtils'

export default {
  name: 'RefDemo',
  setup() {
    //user
    let count  = ref(0)
    let name   = ref('测试用户')
    let salary = ref(20345.68)
    let hired  = ref(true)

    let userbox = ref(null)

    function changeUserName(){
      console.log('before change: ', name, salary)
      if (userbox && userbox.value) {
        name.value = userbox.value.value
      }
    }

    //student
    let student = ref({
      name: '天外飞仙',
      age: 18,
      hobby: ['Watch TV', 'Learning', 'Play basketball']
    })
    let newHobbyIdx = 1

    function changeStudent() {
      student.value.name += '!'
      student.value.age  += 2
      student.value.hobby.push('New Hobby ' + newHobbyIdx++)
    }

    //date testing
    let hireDate = ref(new Date(2012, 7, 18, 12, 0, 0, 0)) //注意:这里是UTC时间

    console.log('date=', hireDate.value)

    const fmtHireDate = computed(() => {
      return formatDate('yyyy-MM-dd', hireDate.value)
    })

    //for testing
    console.log('count is ', getObjClass(count), ', count is ref? ', isRef(count), ', count is reactive? ', isReactive(count))
    console.log('name is ', getObjClass(name))
    console.log('salary is ', getObjClass(salary))
    console.log('hired is ', getObjClass(hired))
    console.log('userbox is ', getObjClass(userbox))

    console.log('student is ', getObjClass(student), ', student is ref? ', isRef(student), ', student is reactive? ', isReactive(student))

    console.log('hireDate is ', getObjClass(hireDate))

    return {count, name, salary, hired,
            userbox, changeUserName,
            student, changeStudent,
            hireDate, fmtHireDate}
  },
}
</script>

<style scoped>

h3 {
  text-align: center;
}

button {
  margin-left: 10px;
}

.date {
  width: 200px;
}

</style>